<template>
  <!-- <div class="loading">
    <div class="loadbox"> <img src="@/assets/images/loading.gif" /> 页面加载中... </div>
  </div> -->
  <div class="head">
    <h1>营销大数据</h1>
    <div class="weather h-55px flex items-center">
      <div @click.prevent="togglePlayback" class="flex items-center">
        <svg :class="{ 'play-button': true, 'playing': state.playing }" width="30" height="30" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="11" fill="none" stroke="#aaa" stroke-width="2" />
          <path v-if="state.playing" d="M8 5v14l11-7z" fill="#aaa" />
          <path v-else d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" fill="#aaa" />
        </svg>
      </div>
      <span class="ml-10px mr-120px color-white">再次报单</span>
      <span class="color-white">{{ state.currentTime }} </span>
    </div>
  </div>

  <div class="mainbox pt-20px px-30px">
    <div class="flex justify-between">
      <div class="w-33/100">
        <div class="boxall">
          <div class="alltitle">湄潭【国锋练字】迎新季 - 感恩回馈</div>

          <div class="my-20px flex justify-center items-center text-#55f4f4">
            <span class="text-20px text-#55f4f4">倒计时</span>
            <div class="times flex items-center">
              <span class="time-bg text-24px">2</span>天
              <span class="time-bg text-24px">00</span>:
              <span class="time-bg text-24px">00</span>:
              <span class="time-bg text-24px">00</span>
            </div>
          </div>

          <div class="sycm pb-20px text-center">
            <div class="flex">
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">访客数</span>
              </div>
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">意向客</span>
              </div>
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">员工数</span>
              </div>
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">获客数</span>
              </div>
            </div>
            <div class="my-20px" style="border-bottom: 1px solid rgb(255 255 255 / 10%)"></div>
            <div class="flex">
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">浏览量</span>
              </div>
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">分享数</span>
              </div>
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">订单数</span>
              </div>
              <div class="item w-1/4 relative">
                <h2 class="text-#c5ccff text-24px">1824</h2>
                <span class="text-18px text-white opacity-70">开团数</span>
              </div>
            </div>

          </div>
          <div class="boxfoot"></div>
        </div>

        <div class="boxall h-[calc(100vh-468px)]">
          <div class="alltitle">团队数据统计</div>

          <div class="content-title">
            <div>团队名称</div>
            <div>订单</div>
            <div>分享</div>
            <div>浏览</div>
          </div>
          <AutoItem v-model="state.teamData" v-slot="{item}" :leading="35" class="h-[calc(100%-120px)]">
            <div class="flex-1">{{ item.teamName }}</div>
            <div class="flex-1">{{ item.orderCount }}</div>
            <div class="flex-1">{{ item.share }}</div>
            <div class="flex-1">{{ item.view }}</div>
          </AutoItem>

          <div class="boxfoot"></div>
        </div>
      </div>

      <div class="w-30/100">
        <div class="bar">
          <div class="barbox">
            <div class="flex justify-center items-center text-#ffeb7b">
              <div class="counter !text-32px text-right pr-20px">已报名</div>
              <div class="myfont counter text-48px font-bold">12189</div>
              <!-- <li class="pulll_left counter">3912410</li> -->
            </div>
          </div>
        </div>

        <div class="signingUp h-120px pt-20px leading-50px">
          <AutoItem v-model="state.signingUp" v-slot="{item}" :leading="50" class="h-100px">
            <div class="flex items-center text-#fff text-18px">
              <img class="mr-10px rounded-50px" src="@/assets/images/head.jpg" />
              <span class="flex-1 text-#ffeb7b text-ellipsis whitespace-nowrap overflow-hidden">{{ item.name }}</span>
              <span class="ml-5px">浏览活动，正在报名！</span>
            </div>
          </AutoItem>
        </div>

        <div class="map mt-20px h-[calc(100vh-350px)]">
          <div class="boxall h-[calc(100vh-350px)]">
            <div class="alltitle">最新订单</div>

            <div class="content-title">
              <div>姓名</div>
              <div>时间</div>
              <div>团队</div>
              <div>员工</div>
            </div>
            <AutoItem v-model="state.orderData" v-slot="{item}" :leading="52" class="h-[calc(100%-120px)]">
              <div class="flex-1 flex items-center"><img class="mr-10px rounded-50px" src="@/assets/images/head.jpg" />{{ item.name }}</div>
              <div class="flex-1">{{ item.time }}</div>
              <div class="flex-1">{{ item.teamName }}</div>
              <div class="flex-1">{{ item.employee }}</div>
            </AutoItem>

            <div class="boxfoot"></div>
          </div>

          <!-- <div class="map1"><img src="@/assets/images/lbx.png" /></div> -->
          <div class="map2"><img src="@/assets/images/jt.png" /></div>
          <div class="map3"><img src="@/assets/images/map.png" /></div>
          <div class="map4" id="map_1"></div>
        </div>
      </div>

      <div class="w-33/100">
        <div class="boxall h-[calc(100vh-128px)]">
          <div class="alltitle">员工排名（共8人）</div>

          <div class="content-title">
            <div>排名</div>
            <div>员工</div>
            <div>团队</div>
            <div>成交量</div>
            <div>成交金额</div>
            <div>分享</div>
            <div>浏览</div>
          </div>
          <AutoItem v-model="state.employeeData" v-slot="{item}" :leading="61" class="h-[calc(100%-120px)]">
            <div class="flex-1">
              <span class="ranking w-30px h-30px leading-30px inline-block">{{ item.id+1 }}</span>
            </div>
            <div class="flex-1 flex flex-col items-center">
              {{ item.employee }}
            </div>
            <div class="flex-1">{{ item.teamName }}</div>
            <div class="flex-1">{{ item.tradingVolume }}</div>
            <div class="flex-1">{{ item.tradingAmount }}</div>
            <div class="flex-1">{{ item.share }}</div>
            <div class="flex-1">{{ item.view }}</div>
          </AutoItem>

          <div class="boxfoot"></div>
        </div>
      </div>
    </div>

  </div>
  <div class="back"></div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import AutoItem from './components/AutoItem.vue'

const state = reactive({
  playing: false,
  currentTime: dayjs().format('YYYY年MM月DD日-HH时mm分ss秒'),
  teamData: [
    { id: 0, teamName: '江南地区', orderCount: 25, share: 56, view: 2345 },
    { id: 1, teamName: '欧洲地区', orderCount: 125, share: 356, view: 3445 },
    { id: 2, teamName: '德国地区', orderCount: 75, share: 745, view: 9865 },
    { id: 3, teamName: '江南地区', orderCount: 55, share: 234, view: 4432 },
    { id: 4, teamName: '华北地区', orderCount: 55, share: 234, view: 4432 }
  ],
  signingUp: [
    { id: 0, name: 'Aa利达通讯手机维修 二手 全新机', src: '' },
    { id: 1, name: '宋晓晓', src: '' }
  ],
  orderData: [
    { id: 0, name: '宋晓晓', src: '', time: '11-06 16:21', teamName: '华北地区', employee: '赵老师' },
    { id: 1, name: '赵明', src: '', time: '10-23 16:21', teamName: '欧洲地区', employee: '程老师' },
    { id: 2, name: '吴诗雨', src: '', time: '12-18 16:21', teamName: '德国地区', employee: '刘老师' },
    { id: 3, name: '威远在', src: '', time: '09-19 16:21', teamName: '江南地区', employee: '李老师' },
    { id: 4, name: '常明明', src: '', time: '10-10 16:21', teamName: '华北地区', employee: '赵老师' }
  ],
  employeeData: [
    { id: 0, employee: '宋晓晓', teamName: '德国地区', tradingVolume: 53, tradingAmount: 74, share: 239, view: 7444 },
    { id: 1, employee: '陆无双', teamName: '华北地区', tradingVolume: 53, tradingAmount: 901, share: 964, view: 4563 },
    { id: 2, employee: '刘一平', teamName: '江南地区', tradingVolume: 53, tradingAmount: 895, share: 7856, view: 90443 },
    { id: 3, employee: '吴承旭', teamName: '欧洲地区', tradingVolume: 53, tradingAmount: 789, share: 9675, view: 7085 },
    { id: 4, employee: '吴承旭', teamName: '欧洲地区', tradingVolume: 53, tradingAmount: 789, share: 9675, view: 7085 },
    { id: 5, employee: '吴承旭', teamName: '欧洲地区', tradingVolume: 53, tradingAmount: 789, share: 9675, view: 7085 },
    { id: 6, employee: '吴承旭', teamName: '欧洲地区', tradingVolume: 53, tradingAmount: 789, share: 9675, view: 7085 },
    { id: 7, employee: '吴承旭', teamName: '欧洲地区', tradingVolume: 53, tradingAmount: 789, share: 9675, view: 7085 }
  ]
})

const speak = () => {
  if ('speechSynthesis' in window) {
    const audio = new Audio(new URL('/src/assets/audio/order1.mp3', import.meta.url).href)
    audio.play()
    // 提示音效 播放完成后 播放语音合成
    audio.onended = function() {
      const speech = new SpeechSynthesisUtterance(`客户${'Aa利达通讯手机维修 二手 全新机'} ；刚刚下了单 请及时处理`)// 您有新订单，请及时处理，
      speech.pitch = 2.2 // 提高语调
      window.speechSynthesis.speak(speech)
    }
  } else {
    alert('抱歉，您的浏览器不支持语音合成功能。')
  }
}
const timerOut = ref()
const togglePlayback = () => {
  state.playing = true
  timerOut.value = null

  speak()
  timerOut.value = setTimeout(() => {
    state.playing = false
  }, 1000)
}

const updateTime = () => {
  state.currentTime = dayjs().format('YYYY年MM月DD日-HH时mm分ss秒')
}
const timerInt = ref()
onMounted(() => {
  timerInt.value = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  clearInterval(timerInt.value)
  clearTimeout(timerOut.value)
})
</script>

<style>

.play-button {
    cursor: pointer;
    transition: transform 0.3s;
}
</style>
